<template>
  <div>

  </div>
</template>

<script setup lang="ts">
import * as THREE from 'three'
import { onMounted } from 'vue';
// 场景
const scene = new THREE.Scene();
// 镜头
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

// 渲染
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const geometry = new THREE.TorusGeometry( 1, 0.4, 16, 100,3.14 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const torus = new THREE.Mesh( geometry, material );
scene.add( torus );


camera.position.z = 5;

function animate() {
	requestAnimationFrame( animate );
    torus.rotation.x += 0.01;
    torus.rotation.y += 0.01;
	renderer.render( scene, camera );
}

onMounted(()=>{
    animate();
})

</script>

<style lang="scss" scoped>

</style>